@import "./src/static/scss/_base.scss";


$clockPadding: 10px;
$pointerBase: 15px;

.clock{
	left: 50%;
	bottom: $clockPadding * 2;
	transform: translateX(-50%);
	opacity: .5;
}

.clock-wrap{
	width: 200px;
	height: 200px;
	border-radius: 50%;
	padding: $clockPadding;
	border: 2px solid $primary;
	position: relative;
	overflow: hidden;
	.clock-item{
		position: absolute;
		background-color: $primary;
		width: calc(100% - #{$clockPadding * 2});
		height: calc(100% - #{$clockPadding * 2});
		left: 50%; top: 50%;
		border-radius: 50%;
		transform: translate(-50%,-50%);
		ul{
			position: absolute;
			width: calc(100% - #{$clockPadding * 3});
			height: calc(100% - #{$clockPadding * 3});
			left: 50%; top: 50%;
			transform: translate(-50%,-50%);
			.hour{
				height: 50%;
				position: absolute;
				left: 50%;
				/*width: 2em;*/
				/*transform: translateX(-50%);*/
				transform-origin: 0 100%;
				font-size: 18px;
				color: white;
			}
		}
	}
	.clock-pointer{
		position: absolute;
		width: 20px;
		height: 20px;
		background-color: #eee;		
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		border-radius: 50%;
		&:after{
			border-radius: 50%;
			content: '';
			position: absolute;
			left: 0; right: 0;
			top: 0; bottom: 0;
			background-color: #eee;		
			display: block;
			z-index: 2;

		}
		[class^="pointer"]{
			position: absolute;
			background: black;
			left: 50%;
			bottom: 50%;
			/*transform: translateX(-50%);*/
			transform-origin: 0 100%;
		}
		.pointer-hour{
			height: $pointerBase * 2.5;
			width: 4px;
			/*margin-left: -2px;*/
			background: $secondary;
			transform: rotate(30deg);
		}
		.pointer-minute{
			height:  $pointerBase * 3.5;
			width: 3px;
			margin-left: -1.5px;
			background-color: #fff;
			transform: rotate(120deg);

		}
		.pointer-second{
			height:  $pointerBase * 5;
			width: 2px;
			margin-left: -1px;
			background: red;
			transform: rotate(60deg);

		}
		
	}
}

@for $hour_num from 1 through 12{
	.hour{
		&:nth-child(#{$hour_num}){
			@if $hour_num > 9 { 
				transform: rotate( $hour_num * 30deg - 8deg );
			}@else {
				transform: rotate( $hour_num * 30deg - 6deg );
			}
			span{
				display: block;
			 	transform:  rotate( -1 * ( $hour_num * 30deg - 5deg ) ) 
			}
		}
	}
}
